<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程学习 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
    <style>
        .video-controls {
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
        }
        .progress-bar {
            height: 3px;
            background: rgba(255,255,255,0.3);
        }
        .progress-fill {
            background: #3b82f6;
            height: 100%;
            width: 35%;
        }
        .tab-button.active {
            color: #3b82f6;
            border-bottom: 2px solid #3b82f6;
        }
    </style>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content bg-white">
            <!-- 视频播放区域 -->
            <div class="relative bg-black" style="height: 220px;">
                <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="视频封面" class="w-full h-full object-cover">
                
                <!-- 播放按钮 -->
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <button class="w-16 h-16 rounded-full bg-white/30 flex items-center justify-center text-white text-xl">
                        <i class="fas fa-play"></i>
                    </button>
                </div>
                
                <!-- 返回按钮 -->
                <div class="absolute top-4 left-4">
                    <button class="text-white text-lg">
                        <i class="fas fa-arrow-left"></i>
                    </button>
                </div>
                
                <!-- 更多操作按钮 -->
                <div class="absolute top-4 right-4">
                    <button class="text-white text-lg">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </div>
                
                <!-- 视频控制条 -->
                <div class="video-controls absolute bottom-0 left-0 right-0 px-4 py-2">
                    <div class="flex justify-between items-center text-white text-xs mb-1">
                        <span>15:23 / 42:56</span>
                        <div class="flex space-x-4">
                            <button><i class="fas fa-download"></i></button>
                            <button><i class="fas fa-expand"></i></button>
                        </div>
                    </div>
                    <div class="progress-bar w-full rounded-full overflow-hidden">
                        <div class="progress-fill"></div>
                    </div>
                </div>
            </div>

            <!-- 课程信息 -->
            <div class="px-4 py-3 border-b border-gray-100">
                <h1 class="text-xl font-bold">Python数据分析实战</h1>
                <div class="flex justify-between items-center mt-2">
                    <p class="text-sm text-gray-500">第3章：Pandas数据处理</p>
                    <div class="flex items-center text-sm text-gray-500">
                        <span>分辨率</span>
                        <select class="ml-2 bg-gray-100 rounded px-2 py-0.5 text-xs">
                            <option>1080p</option>
                            <option>720p</option>
                            <option>480p</option>
                            <option>360p</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 功能选项卡 -->
            <div class="flex border-b border-gray-100">
                <button class="tab-button active flex-1 text-center py-3 text-sm font-medium">章节</button>
                <button class="tab-button flex-1 text-center py-3 text-sm font-medium text-gray-500">笔记</button>
                <button class="tab-button flex-1 text-center py-3 text-sm font-medium text-gray-500">问答</button>
                <button class="tab-button flex-1 text-center py-3 text-sm font-medium text-gray-500">评价</button>
            </div>

            <!-- 章节列表 -->
            <div class="overflow-auto" style="height: calc(100% - 350px);">
                <div class="p-4">
                    <div class="flex items-center justify-between">
                        <h2 class="font-bold">课程目录</h2>
                        <div class="flex items-center text-xs text-gray-500">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i>
                            <span>已学习 15/45 节</span>
                        </div>
                    </div>

                    <!-- 章节1 -->
                    <div class="mt-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold text-sm">第一章：Python基础入门</h3>
                            <div class="flex items-center text-xs text-gray-500">
                                <span>3/3</span>
                                <button class="ml-2"><i class="fas fa-chevron-down"></i></button>
                            </div>
                        </div>
                        <div class="mt-2 space-y-3">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">1.1 Python环境搭建与配置</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 25分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">1.2 Python基础语法详解</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 40分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">1.3 变量、数据类型与运算符</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 35分钟</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节2 -->
                    <div class="mt-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold text-sm">第二章：NumPy基础</h3>
                            <div class="flex items-center text-xs text-gray-500">
                                <span>4/4</span>
                                <button class="ml-2"><i class="fas fa-chevron-down"></i></button>
                            </div>
                        </div>
                        <div class="mt-2 space-y-3">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">2.1 NumPy介绍与安装</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 20分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">2.2 NumPy数组操作</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 35分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">2.3 NumPy数学函数</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 30分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">2.4 NumPy实战练习</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 45分钟</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节3 -->
                    <div class="mt-4 bg-blue-50 p-3 rounded-lg">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold text-sm text-blue-700">第三章：Pandas数据处理</h3>
                            <div class="flex items-center text-xs text-blue-700">
                                <span>2/5</span>
                                <button class="ml-2"><i class="fas fa-chevron-down"></i></button>
                            </div>
                        </div>
                        <div class="mt-2 space-y-3">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">3.1 Pandas介绍与安装</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 15分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">3.2 DataFrame与Series</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 30分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center bg-blue-100 p-2 rounded">
                                <i class="fas fa-play-circle text-blue-500 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm font-medium">3.3 数据读取与处理</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 40分钟</span>
                                        <span class="text-xs text-blue-500 font-medium">当前学习</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="far fa-circle text-gray-300 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">3.4 数据清洗与转换</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 50分钟</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="far fa-circle text-gray-300 mr-3 text-sm"></i>
                                <div class="flex-1">
                                    <p class="text-sm">3.5 Pandas高级功能</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 45分钟</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节4 -->
                    <div class="mt-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold text-sm">第四章：数据可视化</h3>
                            <div class="flex items-center text-xs text-gray-500">
                                <span>0/4</span>
                                <button class="ml-2"><i class="fas fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节5 -->
                    <div class="mt-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold text-sm">第五章：数据分析案例</h3>
                            <div class="flex items-center text-xs text-gray-500">
                                <span>0/5</span>
                                <button class="ml-2"><i class="fas fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作栏 -->
            <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-6 py-3 flex justify-between items-center">
                <button class="flex items-center text-sm text-gray-500">
                    <i class="fas fa-step-backward mr-1"></i>
                    <span>上一节</span>
                </button>
                <div class="flex items-center">
                    <button class="mx-4 text-sm bg-blue-50 text-blue-500 px-3 py-1 rounded-full">
                        <i class="fas fa-download mr-1"></i>
                        <span>下载</span>
                    </button>
                    <button class="mx-4 text-sm bg-blue-50 text-blue-500 px-3 py-1 rounded-full">
                        <i class="fas fa-pencil-alt mr-1"></i>
                        <span>笔记</span>
                    </button>
                </div>
                <button class="flex items-center text-sm text-blue-500 font-medium">
                    <span>下一节</span>
                    <i class="fas fa-step-forward ml-1"></i>
                </button>
            </div>
        </div>
    </div>
</body>
</html> 